<template>
    <div class="m-album-list-box">
        <div class="album" v-for="(album,index) in albums" :key="index">
            <div class="album-bottom"></div>
            <div class="album-img-box">
                <img ondragstart="return false" class="album-img" v-lazy="handleLazyImage(album.image)"
                     :alt="album.id">
                <div class="img-mask"></div>
                <m-play-btn class="play-icon-box" :font-size="60"/>
            </div>
            <div class="album-name">
                <span class="name" v-html="album.name"></span>
            </div>
            <div class="create-time">
                <p class="time" v-html="album.pubTime"></p>
            </div>
        </div>
    </div>
</template>

<script>
  import { Icon } from 'view-design'
  import MPlayBtn from '../m-play-btn/m-play-btn'
  import DisstDefLazyImg from '../../resources/images/album_300.png'

  export default {
    name: 'm-album-list',
    components: {
      MPlayBtn,
      Icon
    },
    props: {
      albums: {
        type: Array
      }
    },
    computed: {
      // 图片懒加载 v-lazy配置对象
      handleLazyImage () {
        return (ImgSrc) => {
          return {
            src: ImgSrc,
            error: DisstDefLazyImg,
            loading: DisstDefLazyImg
          }
        }
      }
    }
  }
</script>

<style lang="less">
    .m-album-list-box {
        position: relative;
        width: 100%;
        margin-right: -25px;
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        flex-flow: wrap;

        .album {
            position: relative;
            width: 25%;
            padding: 0 25px 0 0;
            margin-top: 20px;

            .album-img-box {
                position: relative;
                border-radius: 10px;
                overflow: hidden;
                top: 0;
                z-index: 6;
                transform: translateY(0px);
                transition: transform 200ms;

                .album-img {
                    display: block;
                    width: 100%;
                    height: 100%;
                }

                .img-mask {
                    position: absolute;
                    width: 100%;
                    height: 100%;
                    top: 0;
                    background: #2828287a;
                    border-radius: 10px;
                    opacity: 0;
                    z-index: -10;
                }

                .play-icon-box {
                    opacity: 0;
                    transform: translate3d(0, 0, 0) scale(.7);
                    transition: transform 300ms;
                }

            }

            .album-img-box:hover {
                cursor: pointer;
                transform: translateY(-10px);

                .img-mask {
                    opacity: 1;
                    z-index: 1;
                }

                .play-icon-box {
                    opacity: 1;
                    z-index: 10;
                    transform: translate3d(0, 0, 0) scale(1);
                }
            }

            .album-bottom {
                cursor: pointer;
                position: absolute;
                z-index: 5;
                height: 10px;
                width: 100%;
                bottom: 65px;
            }

            .album-bottom:hover + .album-img-box {
                cursor: pointer;
                transform: translateY(-10px);

                .img-mask {
                    opacity: 1;
                    z-index: 1;
                }

                .play-icon-box {
                    z-index: 11;
                    opacity: 1;
                    transform: translate3d(0, 0, 0) scale(1);
                }
            }

            .album-name {
                margin-top: 5px;
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
                color: var(--font-base-color);

                .name {
                    display: block;
                }

                .name:hover {
                    cursor: pointer;
                    color: var(--font-active-color);
                }
            }

            .create-time {
                margin-top: 5px;
                display: flex;
                justify-content: flex-start;
                align-items: center;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                color: var(--font-tow-color);
            }
        }

        @media (min-width: 1070px) {
            .album {
                width: 25%;
            }
        }

        @media (min-width: 1200px) {
            .album {
                width: 20%;
            }
        }

        @media (min-width: 1400px) {
            .album {
                width: 16.6%;
            }
        }

        @media (min-width: 1650px) {
            .album {
                width: 12.5%;
            }
        }
    }
</style>
